<template>
  <el-row :gutter="5" type="flex" class="split-panel-container">
    <el-col :span="leftSize">
      <div class="split-panel">
        <div class="panel-header clearfix">
          <div v-if="toggleShow" flex items-center flex-1 justify-between>
            <span>{{ leftTitle }}</span>
            <div class="split-panel-header-btn">
              <el-button v-if="showToggleBtn" type="primary" size="small" plain icon="ArrowLeft" @click="toggle" />
              <slot name="btn" />
            </div>
          </div>
          <el-button v-else style="padding: 6px;" type="primary" size="small" plain icon="ArrowRight" @click="toggle"
            @mouseover.native="handleMouseOver" @mouseleave.native="handleMouseLeave" />
        </div>
        <div :style="{ height: leftCardHeight + 'px', 'overflow': 'none' }" :class="leftCls" class="panel-body"
          @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
          <el-scrollbar class="split-panel-scrollbar">
            <slot name="left" />
          </el-scrollbar>
        </div>
      </div>
    </el-col>
    <el-col :span="rightSize">
      <div v-if="rightTitle" class="split-panel">
        <div class="panel-header clearfix">
          <div class="s-flex s-flex1 s-space-between">
            <span>{{ rightTitle }}</span>
            <div class="split-panel-header-btn">
              <slot name="right-btn" />
            </div>
          </div>
        </div>
        <div class="panel-body">
          <slot name="right" />
        </div>
      </div>
      <slot v-else name="right" />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">

// 定义接收的属性
interface Props {
  leftTitle?: string
  leftSpan?: number
  rightTitle?: string
  rightSpan?: number
  showToggleBtn?: boolean
  calHeight?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  leftSpan: 6,
  rightSpan: 18,
  showToggleBtn: true,
  calHeight: true
})

const leftSize = ref(props.leftSpan)
const rightSize = ref(props.rightSpan)
const toggleShow = ref(props.showToggleBtn)
const leftCls = ref('split-panel-left')
const leftCardHeight = ref(500)



const getLeftCardHeight = () => {
  if (props.calHeight) {
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
    leftCardHeight.value = clientHeight - 160
  }
}
const toggle = () => {
  toggleShow.value = !toggleShow.value
  if (toggleShow.value) {
    leftSize.value = props.leftSpan
    rightSize.value = props.rightSpan
    leftCls.value = ''
  } else {
    leftCls.value = 'panel-body-hide'
    leftSize.value = 1
    rightSize.value = 23
  }
}
const handleMouseOver = (e: Event) => {
  if (!toggleShow.value) {
    leftCls.value = 'panel-popover'
  }
}
const handleMouseLeave = (e: Event) => {
  if (!toggleShow.value) {
    leftCls.value = 'panel-body-hide'
  }
}

onMounted(() => {
  getLeftCardHeight()
})

</script>

<style lang="scss">
.split-panel {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;

  .panel-header {
    padding: 8px;
    height: 40px;
    line-height: 25px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;

  }

  .panel-body {
    padding: 8px;
    display: block;
    width: auto;
  }
}

.panel-popover {
  display: fixed;
  position: absolute;
  top: 7px;
  left: 38px;
  transform-origin: left center;
  background: #fff;
  min-width: 250px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 12px;
  z-index: 2018;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  word-break: break-all;
}

.panel-body-hide {
  .split-panel-scrollbar {
    transition: all 0.28s;
    display: none;
  }
}

.split-panel-scrollbar {
  height: 100%;

  .el-scrollbar__wrap {
    overflow-x: auto;
  }
}

.split-panel-header-btn {
  .el-button {
    padding: 6px !important;
  }
}
</style>
